/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Tabs, Tag, Popover, message } from 'antd';
import FiltrateUpgrade from '../../../components/common/FiltrateUpgrade';
import Container from '../../../components/common/Container';
import MyTable from '../../../components/common/MyTable';
import PublicService from '../../../services/PublicService';
import MyModal from '../../../components/common/MyModal';
import request from '../../../utils/request';
import moment from 'moment';
import style from './WordSave.less';
import MyPagination from '../../../components/common/MyPagination';
const TabPane = Tabs.TabPane;
class WordSave extends Component {

    constructor(props) {
        super(props)


        this.state = {
            page: 1,
            rows: 10,
            total: 0,
            status:"",
            siteArr:[],
            pelArr:[],
            loading: false,
            selectedRowKeys: [],
            selectedRows: [],
            dataSource: [],
            pageIndex: 1,
            pageSize: 10,
            columns: [
                {
                    title: '序号',
                    dataIndex: 'num',
                    width: '5%',
                    align: "center",
                },
                {
                    title: '分配时间',
                    dataIndex: 'takeTime',
                    width: '10%',
                    align: "center",
                    render: (text, record) => <span>{text}<span style={{ width: 5, height: 20, backgroundColor: record.status == 1?"#87d068":"#fc1808", position: "absolute", left: 0 }}></span></span>
                },
                {
                    title: "分配人员",
                    dataIndex: 'baseUserName',
                    width: '8%',
                    align: "center",
                    render: (text) => <span>{text ? text : '/'}</span>
                },
                {
                    title: '外勤人员',
                    width: '8%',
                    dataIndex: 'patrolPersonnelName',
                    align: "center",
                },
                {
                    title: "外勤任务",
                    dataIndex: 'taskName',
                    width: '15%',
                    align: "center",
                },
                {
                    title: '任务类型',
                    dataIndex: 'taskType',
                    width: '8%',
                    align: "center",
                    render: (text) => <span>{text == 1 ? "安全检查" : '安全考核'}</span>
                },
                {
                    title: '预计完成时间',
                    dataIndex: 'willFinishTime',
                    width: '15%',
                    align: "center",
                },
                {
                    title: '实际完成时间',
                    dataIndex: 'finishTime',
                    width: '10%',
                    align: "center",
                },
                {
                    title: '完成类型',
                    dataIndex: 'finishType',
                    width: '10%',
                    align: "center",
                },

                {
                    title: '操作',
                    dataIndex: 'userName',
                    width: '10%',
                    align: "center",
                    render: (text, record) => {
                        return <span>
                           
                            <Tag color="#87d068" onClick={this.onCheck.bind(this, record)}>详情</Tag>
                        </span>

                    }
                },

            ]

        }



    }

    componentDidMount() {

        //人员下拉
        request({
            url: '/zhrq-web/patrol/patroltask/getPatrolPersonnelList',
            method: 'GET',
        }).then(data => {
            if(data.rc == 0) {
                console.log(data)
                let arr = []
                data.ret.forEach(item => {
                    arr.push({
                        text:item.name,
                        value:item.id
                    })
                });
    
                this.setState({
                    pelArr:arr
                })
            }
          
        })

        //燃气站点下拉
        request({
            url: '/zhrq-web/patrol/patroltask/getGasStationList',
            method: 'GET',
        }).then(data => {
            if(data.rc == 0) {
                let arr = []
                data.ret.forEach(item => {
                    arr.push({
                        text:item.name,
                        value:item.id
                    })
                });
    
                this.setState({
                    siteArr:arr
                })
            }
        })

        this.onSubmit(1,10)
    }

    //查询
    onSubmit = (page, size, val) => {
        console.log(val)
        this.setState({
            loading:true
        })
        let data = {
            endDate:val && val.endDate?moment(val.endDate).format("YYYY-MM-DD HH:mm:ss"):"",
            startDate:val && val.startDate?moment(val.startDate).format("YYYY-MM-DD HH:mm:ss"):"",
            gasStationName:val && val.gasStationName?val.gasStationName:"",
            patrolPersonnelId:val && val.patrolPersonnelId?val.patrolPersonnelId:"",
            page,rows:size,
            status:this.state.status
        }

        request({
            url: '/zhrq-web/patrol/patroltask/getPageList',
            method: 'POST',
            data:data
        }).then(data => {
            console.log(data)
            if(data.rc == 0) {
                data.ret.items.forEach((item) => {
                    item.takeTime = moment(item.takeTime).format("YYYY-MM-DD HH:mm")
                    item.willFinishTime = moment(item.willFinishTime).format("YYYY-MM-DD")
                })
                this.setState({
                    dataSource:data.ret.items,
                    total:data.ret.rowCount
                })
                setTimeout(() => {
                    this.setState({
                        loading:false
                    })
                },500)
                
            }
        })
    }

    //详情
    onCheck = (record) => {
        PublicService.setCookie('WordDetailsId',record.id)
        this.props.history.push("/WordDetails")
    }
    //分页器
    onChangePage = (page, size) => {
        this.onSubmit(page, size);
        this.setState({
            page,
            rows: size,
            pageIndex: page,
            pageSize: size
        })
    };

        //标签筛选功能
        onTag = (status) => {
            this.setState({
                status
            })
            setTimeout(() => {
                this.onSubmit(1, 10)
            }, 500)
        }


    render() {


        const { total,loading, selectedRowKeys, dataSource, pageIndex, pageSize, addModal, modalBtnLoading } = this.state
        const columns = this.columns
        console.log(this.state.pelArr)
        const items = [
            {
                type: 'select',
                label: '人员',
                paramName: 'patrolPersonnelId',
                placeholder: '请输入',
                style: { width: 150 },
                options:this.state.pelArr
            },
            {
                type: 'select',
                label: '站点',
                paramName: 'gasStationName',
                placeholder: '请输入',
                style: { width: 150 },
                options:this.state.siteArr
            },
            {
                type: 'datePicker',
                label: '开始时间',
                paramName: 'startDate',
                placeholder: '请输入',
                width: 200
            },
            {
                type: 'datePicker',
                label: '结束时间',
                paramName: 'endDate',
                placeholder: '请输入',
                width: 200
            },

        ];

        let rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        const windowWidth = document.body.clientWidth;

        const height = document.body.clientHeight;
        let containerHeight = '75vh';
        if (windowWidth > 1367) {
            containerHeight = '82vh';
        }

        return (
            <div>
                <FiltrateUpgrade
                    items={items}
                    style={{ width: windowWidth > 1900 ? '71%' : '65%' }}
                    ref={ref => { this.f1 = ref }}
                    submit={this.onSubmit.bind(this, 1, 10)}
                />
                <Container
                    style={{ height: containerHeight, position: "relative"}}
                // exportBtnShow={true}
                // exportBtn={this.exportBtn}
                // addBtnText={this.addBtnText}
                // examineBtn={this.examineBtn}
                // editBtn={this.editBtn}
                // lockBtn={this.lockBtn}
                // clearlockBtn={this.clearlockBtn}
                // setDelConfirm={this.setDelConfirm}
                // addBtnShow={true}
                // deleteBtnShow={true}
                // editBtnShow={true}
                // examineBtnShow={true}
                // lockBtnShow={true}
                // clearlockBtnShow={true}
                >
                    <div className={style.Con_header}>

                        <Tag color={this.state.status === "" ? "#108ee9": "blue"} onClick={this.onTag.bind(this, "")}>全部</Tag>
                        <Tag  color={this.state.status === 0 ?"#fc1808": "red" } onClick={this.onTag.bind(this, 0)}>未完成</Tag>
                        <Tag color={this.state.status === 1 ? "#52c41a": "green"} onClick={this.onTag.bind(this, 1)}>已完成</Tag>
                    </div>

                    <div style={{ height: "62vh", overflow: "auto" }}>
                        <MyTable
                            // bordered
                            loading={loading}
                            columns={this.state.columns}
                            // rowSelection={rowSelection}
                            pagination={false}
                            // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                            dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                        />

                    </div>
                    <MyPagination
                        showPage
                        pageSize={pageSize}
                        current={pageIndex}
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        onChange={this.onChangePage}
                        onShowSizeChange={this.onChangePage}
                    />
                </Container>
            </div>
        )
    }
}
export default (WordSave);
